<template>
  <div class="add-users">
    <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" @close="diaClose">
      <el-form :model="userForm" :rules="formRules" ref="userForm">
        <el-form-item label="用户名" label-width="100px" prop="username">
          <el-input :disabled="formTitle == '添加用户' ? false : true" v-model="userForm.username" autocomplete="off"></el-input>
        </el-form-item>
       <el-form-item v-if="formTitle == '添加用户'" label="密码" label-width="100px" prop="password">
          <el-input v-model="userForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="100px" prop="email">
          <el-input v-model="userForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" label-width="100px" prop="mobile">
          <el-input v-model="userForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="diaClose">取 消</el-button>
        <el-button type="primary" @click="confirm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addUser , editUser } from "../../api"
export default {
  name: "AddUsers",
  props:{
    dialogFormVisible:{
      type:Boolean
    },
    formTitle:String,
    formData:Object
  },
  watch:{
    formData(v){
      this.userForm = {
        username:v.username,
        email:v.email,
        mobile:v.mobile
      }
    }
  },
  data(){
    return {
      userForm:{
        username:"",
        password:"",
        email:"",
        mobile:""
      },
      formRules:{
        username:[
          {required:true,message:"用户名必填",trigger:"blur"},
          {pattern:/^\w{3,12}$/ig,message:"用户名格式错误",trigger:"blur"}
        ],
        password:[
          {required:true,message:"密码必填",trigger:"blur"},
          {pattern:/^\w{3,12}$/ig,message:"密码格式错误",trigger:"blur"}
        ],
        email:[
          {required:true,message:"邮箱必填",trigger:"blur"},
          {pattern:/^\w+@\w+\.\w+$/ig,message:"邮箱格式错误",trigger:"blur"}
        ],
        mobile:[
          {required:true,message:"手机号必填",trigger:"blur"},
          {pattern:/^1[3-9]\d{9}$/ig,message:"手机格式错误",trigger:"blur"}
        ]
      }
    }
  },
  methods:{
    // cancel(){
    //   this.$refs.userForm.resetFields()
    //   this.$emit("cancel",false)
    // },
    confirm(){
      this.$refs.userForm.validate((v)=>{
        if(v){
           if(this.formTitle == "添加用户"){
              addUser(this.userForm).then(res => {
                console.log(res)
                this.$refs.userForm.resetFields()
                this.$emit("confirm",false)
              })
           }else{
              editUser({
                id:this.formData.id,
                email:this.userForm.email,
                mobile:this.userForm.mobile
              }).then(res => {
                this.$refs.userForm.resetFields()
                this.$emit("confirm",false)
              })
            }
        }else{
          this.$message.error("信息填写不完整或者存在错误")
        }
      })
     
    },
    diaClose(){
      this.$refs.userForm.resetFields()
      this.$emit("cancel",false)
  
    }
  }
  // 
};
</script>

<style scoped>
</style>